
import React, { Component } from "react";
import styles from './point.css'
import Breadcrumbs from "../../../components/component/Breadcrumb/breadcrumb";
import { Table, Divider, Tree } from 'antd';
import { Map, Marker, InfoWindow, ZoomControl } from 'react-bmapgl';

const datas = [
  { "key": '1', "lng": 108.89650215463763, "lat": 34.23516643378701, "address": "陕西省西安市雁塔区唐延路23号", "resourceName": "救护车", "resourceId": 209, "resourceSum": "1", "unit":'辆',  "range":8 },
  { "key": '2', "lng": 108.89663128605469, "lat": 34.235107676802066, "address": "陕西省西安市雁塔区唐延路23号", "resourceName": "避难所", "resourceId": 181, "resourceSum": "10", "unit":'处',"range":9 },
  { "key": '3', "lng": 108.89649429446445, "lat": 34.23516083803089, "address": "陕西省西安市雁塔区唐延路23号", "resourceName": "消防站", "resourceId": 242, "resourceSum": "1", "unit":'个',"range":18 },
  { "key": '4', "lng": 108.89652857474182, "lat": 34.23532736302904, "address": "陕西省西安市雁塔区唐延路23号", "resourceName": "医院", "resourceId": 210, "resourceSum": "1", "unit":'个',"range":28 },
  { "key": '5', "lng": 108.89682547594428, "lat": 34.234814835692575, "address": "陕西省西安市雁塔区科技一路58号", "resourceName": "甲级写字楼", "resourceId": 44, "resourceSum": "10", "unit":'栋',"range":48 },
  { "key": '6', "lng": 108.89706066495322, "lat": 34.23578492793177, "address": "陕西省西安市雁塔区唐延路9号", "resourceName": "紧急指挥中心", "resourceId": 150, "resourceSum": "10", "unit":'个',"range":98},
  { "key": '7', "lng": 108.89742535854232, "lat": 34.233632580141844, "address": "陕西省西安市雁塔区科技一路20号", "resourceName": "紧急指挥中心", "resourceId": 149, "resourceSum": "10", "unit":'个',"range":198 },
  { "key": '8', "lng": 108.89794408420849, "lat": 34.23893446738079, "address": "陕西省西安市雁塔区唐兴路9号", "resourceName": "加油站", "resourceId": 151, "resourceSum": "15", "unit":'个',"range":498 },
  { "key": '9', "lng": 108.88864553021511, "lat": 34.23726042127724, "address": "陕西省西安市雁塔区团结南路10号", "resourceName": "消防中心", "resourceId": 153, "resourceSum": "15", "unit":'个',"range":998 },
  { "key": '10', "lng": 108.90402608622121, "lat": 34.25054334723368, "address": "陕西省西安市莲湖区二环南路西段-395号", "resourceName": "避难所", "resourceId": 154, "resourceSum": "15", "unit":'处',"range":1999 },
  { "key": '11', "lng": 108.88844166403825, "lat": 34.22029011916204, "address": "陕西省西安市雁塔区沣惠南路34号", "resourceName": "加气站", "resourceId": 156, "resourceSum": "15", "unit":'个',"range":1999 },
  { "key": '12', "lng": 108.88352622637366, "lat": 34.27556811845646, "address": "陕西省西安市莲湖区大庆路651号", "resourceName": "加油站", "resourceId": 157, "resourceSum": "10", "unit":'个',"range":4998 },
  { "key": '13', "lng": 108.93062331700885, "lat": 34.20260146526296, "address": "陕西省西安市雁塔区521家属医院", "resourceName": "医院", "resourceId": 158, "resourceSum": "20", "unit":'个',"range":4998 },
  { "key": '14', "lng": 108.8736726883049, "lat": 34.315273880786684, "address": "陕西省西安市未央区邓六路", "resourceName": "公园", "resourceId": 159, "resourceSum": "1", "unit":'个',"range":10000 },
  { "key": '15', "lng": 108.95075116250474, "lat": 34.90721294211546, "address": "陕西省铜川市耀州区长虹南路辅路", "resourceName": "公园", "resourceId": 184, "resourceSum": "1", "unit":'个',"range":100000 },
  { "key": '16', "lng": 109.51294089298197, "lat": 34.501721524137295, "address": "陕西省渭南市临渭区朝阳大街21号", "resourceName": "机关单位", "resourceId": 195, "resourceSum": "1", "unit":'处',"range":100000 },
  { "key": '17', "lng": 108.25204898819545, "lat": 34.532977835013426, "address": "陕西省咸阳市乾县东大街148号", "resourceName": "商业中心", "resourceId": 198, "resourceSum": "1", "unit":'个',"range":100000 },
  { "key": '18', "lng": 109.1582032919856, "lat": 33.42824184888231, "address": "陕西省商洛市镇安县南新街34号", "resourceName": "医院", "resourceId": 201, "resourceSum": "1", "unit":'个',"range":100000 },
  { "key": '19', "lng": 116.40401031088727, "lat": 39.91445974905955, "address": "北京市东城区西长安街", "resourceName": "广场", "resourceId": 259, "resourceSum": "1", "unit":'个',"range":1000000 },
  { "key": '20', "lng": 106.59476975853936, "lat": 29.57293184522584, "address": "重庆市渝中区朝东路1号", "resourceName": "商业中心", "resourceId": 289, "resourceSum": "1", "unit":'个',"range":1000000 },
  { "key": '22', "lng": 112.96766415308835, "lat": 28.238555708681933, "address": "湖南省长沙市岳麓区潇湘北路", "resourceName": "公园", "resourceId": 219, "resourceSum": "1", "unit":'个',"range":1000000 },
]

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      total: datas.length,
      loading:false,
      data:[],
      lngs:'108.89650215463763',
      lats:'34.23516643378701',
      resourceName: datas[0].resourceName,
      resourceSum:datas[0].resourceSum,
      unit:datas[0].unit,
      address:datas[0].address,
      mapSwitch:false,
      columns: [
        {
          title: '资源ID',
          dataIndex: 'resourceId',
          ellipsis:true,
          width:60
        },
        {
          title: '资源名称',
          dataIndex: 'resourceName',
          ellipsis:true,
          onFilter: (value, record) => record.resourceName.indexOf(value) === 0,    
        },
        {
          title: '数量',
          dataIndex: 'resourceSum',
          sorter: {
            compare: (a, b) => a.resourceSum - b.resourceSum,
            multiple: 1,
          },
          ellipsis:true,
        },
        {
          title: '单位',
          dataIndex: 'unit',
          ellipsis:true,
        },  
        {
          title: '资源范围',
          dataIndex: 'range',
          sorter: {
            compare: (a, b) => a.range - b.range,
            multiple: 4,
          },
          render:(_,record)=>{
              return(
                <span>{record.range}米</span>
              )
          },
          ellipsis:true,
        },    
        {
          title: '资源所在经度',
          width:152,
          dataIndex: 'lng',
          sorter: {
            compare: (a, b) => a.lng - b.lng,
            multiple: 2,
          },
          ellipsis:true,
        },
        {
          title: '资源所在纬度',
          dataIndex: 'lat',
          width:152,
          sorter: {
            compare: (a, b) => a.lat - b.lat,
            multiple: 3,
          },
          ellipsis:true,
        }, 
        {
          title: '资源所在地址',
          dataIndex: 'address',
          ellipsis:true,
        },
        {
          title: '操作',
          dataIndex: '',
          ellipsis:true,
          render: (record)=>{
            return (
              <span>
                <a onClick={()=>{ this.getPoint(record) } }> 获取标记 </a>
              </span>
            )
          }
        },
      ],
      treeData: [
        {
          title: '地图资源',
          key: '0-0',
          children: [
            {
              title: '应急资源',
              key: '0-0-0',
              children: [
                {
                  title: '消防站',
                  key: '0-0-0-0',
                },
                {
                  title: '救护车',
                  key: '0-0-0-1',
                },
                {
                  title: '防汛应急点',
                  key: '0-0-0-2',
                },
                {
                  title: '警力应急中心',
                  key: '0-0-0-3',
                },                                 
              ],
            },
            {
              title: '资源站点',
              key: '0-0-1',
              children: [
                {
                  title:'加油站',
                  key: '0-0-1-0',
                },
                {
                  title:'加气站',
                  key: '0-0-1-1',
                }, 
                {
                  title:'充电站',
                  key: '0-0-1-2',
                },                               
              ],
            },
            {
              title: '商业住宅办公设施',
              key: '0-0-2',
              children: [
                {
                  title: '购物中心',
                  key: '0-0-2-0',
                },
                {
                  title: '文娱剧场',
                  key: '0-0-2-1',
                  children:[
                    {
                      title: '音乐剧场',
                      key: '0-0-2-1-0',
                    },
                    {
                      title: '体育场',
                      key: '0-0-2-1-1',
                    }, 
                    {
                      title: '电影院',
                      key: '0-0-2-1-2',
                    },
                    {
                      title: '美术剧场',
                      key: '0-0-2-1-3',
                    },                                          
                  ]                  
                },
                {
                  title: '公园',
                  key: '0-0-2-2',
                },
                {
                  title: '酒店',
                  key: '0-0-2-4',
                },                
                {
                  title: '写字楼',
                  key: '0-0-2-3',
                },
                {
                  title: '游乐场',
                  key: '0-0-2-5',
                },  
              ],
            }, 
            {
              title: '基础设施',
              key: '0-0-3',
              children: [
                {
                  title: '公交站点',
                  key: '0-0-3-0',
                },
                {
                  title: '地铁站',
                  key: '0-0-3-1',
                },
                {
                  title: '出租车站点',
                  key: '0-0-3-2',
                },              
                {
                  title: '红绿灯',
                  key: '0-0-3-3',
                },
                {
                  title: '停车场',
                  key: '0-0-3-4',
                },                          
              ],
            },
            {
              title: '民生基础设施',
              key: '0-0-4',
              children: [
                {
                  title: '学校',
                  key: '0-0-4-0',
                },
                {
                  title: '医院',
                  key: '0-0-4-1',
                },
                {
                  title: '食品饭店',
                  key: '0-0-4-2',
                },              
                {
                  title: '政府单位',
                  key: '0-0-4-3',
                },
                {
                  title: '住宅楼',
                  key: '0-0-4-4',
                },                          
              ],
            },                                    
          ],
        },
      ]      
    };
  }

  componentDidMount() {
    this.getData();
    this.getMap();
    window.scrollTo(0, 0);
  }

  getMap = () =>{
    setTimeout(() => {
        this.setState({mapSwitch:true})
    }, 10);
  }

  getData = () =>{
    this.setState({
      loading: true,
      data:[]
    });
    setTimeout(() => {
      this.setState({
        loading: false,
        data:datas
      });    
    }, 1000);
  }

  onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
    this.getData();
  }

  getPoint = (record) =>{
      this.setState({
        lngs: record.lng,
        lats: record.lat,
        resourceName:record.resourceName,
        resourceSum:record.resourceSum,
        unit:record.unit,
        address:record.address,
      })
  }

  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
    this.getData();
  };
  onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys, info);
    this.getData();
  };

  render() {
    const { total, loading, data, lngs, lats, mapSwitch, columns, resourceName, resourceSum, unit, address, treeData  } = this.state;
    let spk =`<p>数量: ${resourceSum} ${unit}</p><p>地址: ${address}</p><p>经纬度: ${lngs},${lats}</p>`
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />           
        <div style={{margin:20}}>
            <div>
                <div style={{width:'76%',height:350,marginLeft:360}}>
                  {
                    mapSwitch &&
                          <Map
                            style={{height:350}}
                            center={new window.BMapGL.Point(parseFloat(lngs), parseFloat(lats))}
                            zoom={15}
                            tilt={40}>
                              <Marker
                                position={new window.BMapGL.Point(parseFloat(lngs), parseFloat(lats))}
                                enableDragging
                              />
                              <InfoWindow
                                  position={new window.BMapGL.Point(parseFloat(lngs), parseFloat(lats))}
                                  title={resourceName}
                                  width={330}
                                  height={80}
                                  autoViewport
                                  text={spk}
                                  onClickclose={e => {console.log(e)}}
                              />    
                                                   
                              <ZoomControl />                       
                          </Map>
                  }
                </div>
                <div style={{width:'76%',margin:'auto',marginTop:30,marginLeft:360}}>
                  <Table columns={columns} dataSource={data} 
                      onChange={this.onChange}                       
                      loading={loading}
                      size="small"
                      pagination={{
                        pageSize:5, 
                        total:{total},
                        showTotal:(total) => `共 ${total} 个`,
                      }} />                  
                </div>
                <div className='points' >
                  <Tree
                    checkable
                    defaultExpandedKeys={['0-0-0-1']}
                    defaultSelectedKeys={['0-0-0-1']}
                    defaultCheckedKeys={['0-0-0-1']}
                    onSelect={this.onSelect}
                    onCheck={this.onCheck}
                    treeData={treeData}
                  />
                </div>
            </div>       
        </div>
      </>  
    )
    }
}
